<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/html">
<head>
    <title>添加读者</title>
    <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}">
    <script th:src="@{/js/jquery-3.2.1.js}"></script>
    <script th:src="@{/js/bootstrap.min.js}"></script>
    <style>
        body {
            background-color: rgb(240, 242, 245);
        }
    </style>

</head>
<body>
<div th:replace="components/adminPublicComponents::topbar"></div>

<div class="col-xs-6 col-md-offset-3" style="position: relative;margin-top: 5%">
    <div class="panel panel-primary">
        <div class="panel-heading">
            <h3 class="panel-title">添加读者</h3>
        </div>
        <div class="input-group">
            <span id="checkInfo"></span>
        </div>
        <div class="panel-body">
            <form th:action="@{/readerAddDo}" method="post" id="readeredit">
                <div class="input-group">
                    <span class="input-group-addon">读者证号</span>
                    <input type="text" class="form-control" name="readerId" id="readerId" onblur="myCheck()">
                </div>

                <div class="input-group">
                    <span class="input-group-addon">姓名</span>
                    <input type="text" class="form-control" name="name" id="name">
                </div>
                <div class="input-group">
                    <span class="input-group-addon">性别</span>
                    <input type="text" class="form-control" name="sex" id="sex">
                </div>
                <div class="input-group">
                    <span class="input-group-addon">生日</span>
                    <input type="text" class="form-control" name="birth" id="birth">
                </div>
                <div class="input-group">
                    <span class="input-group-addon">地址</span>
                    <input type="text" class="form-control" name="address" id="address">
                </div>
                <div class="input-group">
                    <span class="input-group-addon">电话</span>
                    <input type="text" class="form-control" name="telcode" id="telcode">
                </div>
                <input type="submit" value="添加" class="btn btn-success btn-sm text-left">
                <script th:inline="javascript">
                    function mySubmit(flag) {
                        return flag;
                    }

                    $("#readeredit").submit(function () {
                        if ($("#readerId").val() == '' || $("#sex").val() == '' || $("#birth").val() == '' || $("#address").val() == '' || $("#telcode").val() == '') {
                            alert("请填入完整读者信息！");
                            return mySubmit(false);
                        }
                    })

                    function myCheck() {
                        $.post({
                            //"/checkReaderId"
                            // [[@{/checkReaderId}]]
                            url : "/checkReaderId",
                            data: {"readerId": $("#readerId").val()},
                            success: function (data) {
                                if (data.isExist==="false") {
                                    $("#checkInfo").css("color", "green")
                                } else if (data.isExist === "true") {
                                    $("#checkInfo").css("color", "red")
                                }
                                $("#checkInfo").html(data.msg)
                            }
                        })
                    }
                </script>
            </form>
        </div>
    </div>

</div>

</body>
</html>
